<!DOCTYPE html>
<html>

<head>
    <#import "spring.ftl" as spring>
        <title>
            <@spring.message code="title" />
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <link rel=stylesheet type=text/css href="/style.css" />
        <link rel="stylesheet" type="text/css" href="/highlight-theme-github.css" />
        <style type="text/css">
   .file {
    position: relative;
    display: inline-block;
    background: #337ab7;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover{
    text-decoration: none;
}
</style>
<script src="/highlight.pack.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <#include "/nav.ftl">
        </div>
        <div class="well editPanel">
            <h2><@spring.message code="system.addacard"/></h2>
            <form action="/cards/add" method="post" class="cardForm">
                <div class="form-group">
                    <label for="general" class="toggleButton btn btn-default btn-lg"><@spring.message code="system.General"/> &nbsp;
                    <input type="radio" name="type" value="1" id="general"/>
                </label>
                    <label for="code" class="toggleButton btn btn-default btn-lg"><@spring.message code="system.Code"/> &nbsp;
                    <input type="radio" name="type" value="2" id="code"/>
                </label>
                </div>
                <div class="form-group fieldFront">
                    <label for="front"><@spring.message code="system.front"/></label>
                    <input type="text" name="front" id="front" class="form-control">
                </div>
                <div class="form-group fieldBack">
                    <label for="back"><@spring.message code="system.back"/></label>
                    <textarea name="back" class="form-control" id="back" placeholder="back of card" rows="12"></textarea>
                </div>
                <div class="form-group">
                    <button type="submit" class="saveButton btn btn-lg btn-primary"><@spring.message code="system.save"/></button>
                </div>
            </form>
        </div>
        <div class="well editPanel">
        <form name="miningMap" id="miningMap" method="POST" enctype="multipart/form-data">
           <div class="row">
            <div class="col-md-6">
            <input type="text" id="miningMapName" placeholder="未选择任何文件" class="form-control">
             </div>
               <div class="col-md-2">
             <a href="javascript:;" class="file">选择文件
            <input type="file" name="uploadFile" id="map" class="form-control">
            </a>
             </div>
              <div>
            <input type="button" id="upload" value="Excel导入"  class="importButton btn btn-sm btn-primary">
            </div>
            </div>
         </form>
        </div>
        <div class="page-header">
            <h2>
                <#if cards??>
                    <#if cards?size==1>
                        ${cards?size} Card
                        <#else>
                            ${cards?size} Cards
                    </#if>
                    <#else>
                        0 Card
                </#if>
            </h2>
        </div>
        <div class="btn-group btn-group-md" role="group" aria-label="filters">
            <#if filter_name??>
                <#if filter_name=="all">
                    <a href="/filter_cards/all" class="btn btn-primary"><@spring.message code="system.All"/></a>
                    <a href="/filter_cards/general" class="btn btn-default"><@spring.message code="system.General"/></a>
                    <a href="/filter_cards/code" class="btn btn-default"><@spring.message code="system.Code"/></a>
                    <a href="/filter_cards/known" class="btn btn-default"><@spring.message code="system.Known"/></a>
                    <a href="/filter_cards/unknown" class="btn btn-default"><@spring.message code="system.Unknown"/></a>
                    <#elseif filter_name="general">
                        <a href="/filter_cards/all" class="btn btn-default"><@spring.message code="system.All"/></a>
                        <a href="/filter_cards/general" class="btn btn-primary"><@spring.message code="system.General"/></a>
                        <a href="/filter_cards/code" class="btn btn-default"><@spring.message code="system.Code"/></a>
                        <a href="/filter_cards/known" class="btn btn-default"><@spring.message code="system.Known"/></a>
                        <a href="/filter_cards/unknown" class="btn btn-default"><@spring.message code="system.Unknown"/></a>
                        <#elseif filter_name="code">
                            <a href="/filter_cards/all" class="btn btn-default"><@spring.message code="system.All"/></a>
                            <a href="/filter_cards/general" class="btn btn-default"><@spring.message code="system.General"/></a>
                            <a href="/filter_cards/code" class="btn btn-primary"><@spring.message code="system.Code"/></a>
                            <a href="/filter_cards/known" class="btn btn-default"><@spring.message code="system.Known"/></a>
                            <a href="/filter_cards/unknown" class="btn btn-default"><@spring.message code="system.Unknown"/></a>
                            <#elseif filter_name="known">
                                <a href="/filter_cards/all" class="btn btn-default"><@spring.message code="system.All"/></a>
                                <a href="/filter_cards/general" class="btn btn-default"><@spring.message code="system.General"/></a>
                                <a href="/filter_cards/code" class="btn btn-default"><@spring.message code="system.Code"/></a>
                                <a href="/filter_cards/known" class="btn btn-primary"><@spring.message code="system.Known"/></a>
                                <a href="/filter_cards/unknown" class="btn btn-default"><@spring.message code="system.Unknown"/></a>
                                <#elseif filter_name="unknown">
                                    <a href="/filter_cards/all" class="btn btn-default"><@spring.message code="system.All"/></a>
                                    <a href="/filter_cards/general" class="btn btn-default"><@spring.message code="system.General"/></a>
                                    <a href="/filter_cards/code" class="btn btn-default"><@spring.message code="system.Code"/></a>
                                    <a href="/filter_cards/known" class="btn btn-default"><@spring.message code="system.Known"/></a>
                                    <a href="/filter_cards/unknown" class="btn btn-primary"><@spring.message code="system.Unknown"/></a>

                </#if>
                <#else>
                    <a href="/filter_cards/all" class="btn btn-primary"><@spring.message code="system.All"/></a>
                    <a href="/filter_cards/general" class="btn btn-default"><@spring.message code="system.General"/></a>
                    <a href="/filter_cards/code" class="btn btn-default"><@spring.message code="system.Code"/></a>
                    <a href="/filter_cards/known" class="btn btn-default"><@spring.message code="system.Known"/></a>
                    <a href="/filter_cards/unknown" class="btn btn-default"><@spring.message code="system.Unknown"/></a>
            </#if>

        </div>

        <br />
        <br />

        <table class="table table-bordered">
            <#if cards??>
                <#list cards as card>
                    <tr>
                        <td>
                            <a href="/cards/edit/${card.id}" class="btn btn-xs btn-primary"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                        </td>
                        <td class="cardContent">
                            <h4>
                                ${card.front!""}
                            </h4>
                            <#if card.type==1>
                                ${card.back!""}
                                <#else>
                                    <pre><code>${card.back}</code></pre>
                            </#if>
                        </td>
                    </tr>
                </#list>
                <#else>
                    <tr>
                        <td>
                            <em>No cards to show.</em>
                        </td>
                    </tr>
            </#if>
        </table>
    </div>
    <script src="/jquery-2.2.4.min.js"></script>
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="/8cea844162.js"></script>
    <script src="/fastclick.min.js" type="text/javascript"></script>
    <script src="/cards-show-ctrl.js" type="text/javascript"></script>
    <script>
//导入巷道变形
var filePath;
$("#upload").on("click", function () {
  var data = new FormData($("#miningMap")[0]);
  $(this).css("background-color", "#204d74");
  presentColor = "#204d74";
  $.ajax({
    url: "/cards/import",
    type: "POST",
    data: data,
    dataType: "JSON",
    cache: false,
    processData: false,
    contentType: false,
    error: function () {
      $("#miningMapName").css("borderColor", "red");
    }
  }).done(function (ret) {

    $("#miningMapName").css("border-color", "green");

  });
  return false;
});
$("#map").change(function () {
  $("#miningMapName").val($("#map").val());
});



function initFileInput(ctrlName, uploadUrl) {
  var control = $("#map");
  control
    .fileinput({
      language: "zh", //设置语言
      uploadUrl: uploadUrl, //上传地址
      showUpload: false, //是否显示上传按钮
      showRemove: false,
      dropZoneEnabled: false,
      showCancel: false,
      browseClass: "btn btn-primary",
      showCaption: true, //是否显示标题
      allowedPreviewTypes: ["text"],
      allowedFileTypes: ["image", "text"],
      allowedFileExtensions: ["jpg", "png", "txt"],
      // maxFileSize: 2000,
      maxFileCount: 1
    })
    .on("filebatchselected", function (event, files) {
      $(this).fileinput("upload");
    })
    .on("fileuploaded", function (event, data) {
      $("#path").attr("value", data.response);
      filePath = data.response.success;
    });
}
$(function () {
  var path = "/cards/import";
  initFileInput("fileSelect", path);
});
</script>
</body>

</html>